@tailwind base;

html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
}
@supports (font-variation-settings: normal) {
  html {
    font-family: 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI',
      'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
      'Helvetica Neue', sans-serif;
  }
}

html {
  @apply subpixel-antialiased;
  font-size: 16px;
  font-feature-settings: 'rlig' 1, 'calt' 1, 'ss01' 1;
}
body {
  @apply bg-white;
}

h1 {
  @apply text-4xl font-bold tracking-tight;
}
h2 {
  @apply text-3xl font-semibold tracking-tight mt-10;
  @apply border-b;
}
h3 {
  @apply text-2xl font-semibold tracking-tight mt-8;
}
h4 {
  @apply text-xl font-semibold tracking-tight mt-8;
}
h5 {
  @apply text-lg font-semibold tracking-tight mt-8;
}
h6 {
  @apply text-base font-semibold tracking-tight mt-8;
}
a {
  @apply text-blue-600 underline;
}
p {
  @apply mt-6 leading-7;
}
hr {
  @apply my-8;
}
code {
  @apply p-1 text-sm text-gray-800 bg-gray-500 bg-opacity-25 rounded;
}
pre {
  @apply p-4 bg-gray-200 rounded-lg mt-6 mb-4 overflow-x-auto scrolling-touch;
}
pre code {
  @apply p-0 text-black bg-transparent rounded-none;
}
a code {
  @apply text-current no-underline;
}
figure {
  @apply mb-8 relative;
}
video {
  @apply absolute top-0 left-0;
  cursor: pointer;
}
figure figcaption {
  @apply text-sm text-gray-600;
}
@media (min-width: 768px) {
  figure {
    /* allow figures to overflow, but not exceeding the viewport width */
    @apply -mr-56;
    max-width: calc(100vw - 20rem);
  }
}

@tailwind components;
@tailwind utilities;

.main-container {
  min-height: 100vh;
}

.sidebar {
  @apply select-none;
}
.sidebar ul ul {
  @apply ml-5;
}
.sidebar a:focus-visible,
.sidebar button:focus-visible {
  @apply shadow-outline;
}
.sidebar li.active > a {
  @apply font-semibold text-black bg-gray-200;
}
.sidebar button,
.sidebar a {
  @apply block w-full text-left text-base text-black no-underline text-gray-600 mt-1 p-2 rounded select-none outline-none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.sidebar a:hover,
.sidebar button:hover {
  @apply text-gray-900 bg-gray-100;
}

.sidebar .active-route > button {
  @apply text-black font-medium;
}

.sidebar .active-route > button:hover {
  @apply text-current bg-transparent cursor-default;
}

content ul {
  @apply list-disc ml-6 mt-6;
}
content li {
  @apply mt-2;
}
.subheading-anchor {
  margin-top: -84px;
  display: inline-block;
  position: absolute;
  width: 1px;
}

.subheading-anchor + a:hover .anchor-icon,
.subheading-anchor + a:focus .anchor-icon {
  opacity: 1;
}
.anchor-icon {
  opacity: 0;
  @apply ml-2 text-gray-500;
}

h2 a {
  @apply no-underline;
}
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.search-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.algolia-autocomplete .algolia-docsearch-suggestion--category-header span {
  display: inline-block;
}
.algolia-autocomplete .ds-dropdown-menu {
  width: 500px;
  min-width: 300px;
  max-width: calc(100vw - 50px);
}

[data-reach-skip-link] {
  @apply sr-only;
}

[data-reach-skip-link]:focus {
  @apply not-sr-only fixed ml-6 top-0 bg-white text-lg px-6 py-2 mt-2 outline-none shadow-outline z-50;
}
